<template>
	<el-dialog :title="form.modelName" v-model="open" width="800px" @open="initOpen" append-to-body :before-close="close"
		@close="close">
		<!-- <p class="dialogTitle">{{form.modelName}}</p> -->
		<el-form ref="ResettlementRef" :model="form" label-width="120px">
			<el-row>
				<el-col :span="12">
					<el-form-item label="模型名称" prop="modelName">
						{{form.modelName}}
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="是否默认" prop="">
						{{form.isDefault=='0'?'否':'是'}}
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item label="地区" prop="">
						{{form.province}} - {{form.city}}
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="维护人" prop="">
						{{form.createUserName}}
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="维护人单位" prop="">
						{{form.orgName}}
					</el-form-item>
				</el-col>
			</el-row>
			<el-divider border-style="dashed"></el-divider>
			<el-row>
				<el-col :span="6" class="tab-title">
					需紧急安置人数模型
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="20" :offset="2">

					在公里格网分布图上统计各烈度影响人口，对于需要紧急安置的人数所占比例，按下表计算：<br />

					<div style="margin-top:10px;line-height: 30px;">
						<table align="center" style="width: 100%;border-collapse: collapse;">
							<caption>各烈度影响人口的需紧急安置人口比例：</caption>
							<tr>
								<td style="width: 180px;" align="center" valign="middle">烈度</td>
								<td style="width: 100px;" align="center" valign="middle">VI</td>
								<td style="width: 100px;" align="center" valign="middle">VII</td>
								<td style="width: 100px;" align="center" valign="middle">VIII</td>
								<td style="width: 100px;" align="center" valign="middle">＞IX</td>
							</tr>
							<tr>
							</tr>
							<tr>
								<td style="width: 180px;" align="center" valign="middle">需紧急安置人数占人口比例</td>
								<td align="center" valign="middle">{{form.ratio1}}</td>
								<td align="center" valign="middle">{{form.ratio2}}</td>
								<td align="center" valign="middle">{{form.ratio3}}</td>
								<td align="center" valign="middle">{{form.ratio4}}</td>
							</tr>
						</table>
					</div>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" @click="close">关闭</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<script setup>
import { getResettlementModelById } from '@/api/earthquakeLossesEstimation/earthquakeSetting'

const props = defineProps({
	open: Boolean,
	id: {
		type: String,
		default: ''
	}
})
const emits = defineEmits(['update:open'])
const data = reactive({
	form: {
		modelName: '',
		isDefault: '',
		province: '',
		city: '',
		createUserName: '',
		orgName: ''
	}
})
const { form } = toRefs(data)
// 查询模型详情
const getModelDetail = () => {
	getResettlementModelById(props.id).then(res => {
		if (res.code == 200) {
			res.data && (form.value = res.data)
		}
	})
}

const initOpen = () => {
	getModelDetail()
}
const close = () => {
	emits('update:open', false)
}
</script>
<style scoped lang="scss">
.el-form {
	padding-top: 20px;
	.el-form-item {
		margin-bottom: 0;
	}
}

.tab-title {
	font-size: 16px;
	font-weight: bold;
	border-left: 4px solid var(--el-color-primary);
	font-family: PingFangSC-Medium;
	padding-left: 10px;
	margin-bottom: 20px;
}
#lineTd {
	background: #fff url() no-repeat 100% center;   
}
table td{
	border:1px solid #c6c6c6;
}
</style>